body,
html {
  margin: 0;
  padding: 0;
  height: 100vh;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: rgb(250, 250, 250);
}

.container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100vw;
  height: 100vh;
}

.main-container {
  display: flex;
  flex: 1;
}

/* 播放歌单 */
.play_menu_btn {
  position: absolute;
  bottom: 20px;
  right: 30px;
  font-size: 20px;
  z-index: 10;
}

.play_menu_btn i {
  margin: 0 10px;
  color: gray;
}

.play_menu_btn i:hover {
  color: rgb(0, 0, 0);
}

/* 左侧导航栏 */
.left {
  display: flex;
  flex-direction: column;
  width: 200px;
  min-width: 200px;
  overflow-y: hidden;
  max-height: calc(100vh - 70px);
  background-color: rgb(250, 250, 250);
}

.left:hover {
  overflow-y: scroll;
}

.logo {
  width: 200px;
  height: 65px;
  position: fixed;
  background-color: #9fabf0;
  border-radius: 20px 0 0 20px;
}

.logo img {
  width: 170px;
  height: auto;
  margin: 15px;
}

.onlinemusic {
  margin-top: 80px
}

.onlinemusic,
.mymusic,
.myplaylists {
  margin-left: 20px;
  margin-right: 5px;
  display: flex;
  flex-direction: column;
}

.onlinemusic div p,
.mymusic div p,
.myplaylists div p {
  font-size: small;
  color: rgb(104, 103, 103);
  margin-bottom: 7px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.onlinemusic ul li,
.mymusic ul li {
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: medium;
  font-style: italic;
  color: rgb(116, 116, 116);
  margin-bottom: 10px;
  padding-left: 10px;
  cursor: pointer;
  border-radius: 5px 7px 7px 5px;
  transition: all 0.15s ease-out;
}

.myplaylists ul li {
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: medium;
  font-style: italic;
  color: rgb(116, 116, 116);
  margin-bottom: 10px;
  cursor: pointer;
  -o-border-radius: 5px 7px 7px 5px;
  transition: all 0.1s ease-out;
  -webkit-border-radius: 5px 7px 7px 5px;
  -moz-border-radius: 5px 7px 7px 5px;
  -ms-border-radius: 5px 7px 7px 5px;
  border-radius: 5px 7px 7px 5px;
}

.onlinemusic ul li:hover,
.mymusic ul li:hover,
.myplaylists ul li:hover {
  background-color: rgb(238, 237, 237);
}

.click1 {
  background-color: rgb(231, 231, 231);
  color: black !important;
}

.myplaylists ul li img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 10%;
}

.onlinemusic ul li i,
.mymusic ul li i {
  margin-right: 10px;
  font-size: 20px;
  color: gray;
}

.ss1 {
  margin-top: 10px;
  position: relative;
}

.ri-add-line {
  margin-left: 30px;
  font-size: 18px;
}

.clic1 {
  color: #b4b4b4;
}


/* 右侧主内容 */
.right {
  flex-grow: 1;
  background-color: rgb(255, 255, 255);
  overflow-y: scroll;
  overflow-x: hidden;
  width: calc(100vw - 200px);
  max-height: calc(100vh - 70px);
}

/* 推荐部分 */
.recommend {
  width: 100%;
  padding: 5px 20px 0 20px;
}

.recommend p:nth-child(1) {
  margin-left: 30px;
}

.main_recommend {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(1, 1fr);
  place-items: center;
  width: 100%;
  height: 270px;
  padding: 0 20px 0 20px;
  /* gap: 23px; */
  /* overflow-x: scroll; */
  overflow: hidden;
}

/* 自定义滚动条 */
.main_recommend::-webkit-scrollbar {
  height: 4px;
}

.main_recommend::-webkit-scrollbar-thumb {
  background-color: rgba(255, 122, 166, 0.5);
  border-radius: 10px;
}

.main_recommend::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}

.main_recommend .card1 {
  grid-column: span 2;
}

.card1 {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 500px;
  height: 250px;
  margin: 10px
}

.card {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 230px;
  height: 260px;
  margin: 10px;
  -o-transition: all .5;
  -webkit-transition: all .5;
  -moz-transition: all .5;
  -ms-transition: all .5;
  transition: all .5;
}

.card1 img {
  width: 500px;
  height: 230px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

.card img {
  width: 230px;
  height: 230px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  object-fit: cover;
}

.card1_float {
  display: block;
  position: absolute;
  width: 200px;
  height: 200px;
}

.card1_float p:nth-child(1) {
  margin: 50px 0 0 30px;
  font-size: 25px;
  color: white;
}

.card1_float p:nth-child(2) {
  margin: 20px 0 0 30px;
  font-size: 18px;
  color: white;
}

.card1_float p:nth-child(2) span {
  font-size: 25px;
  color: white;
}

.tubiao {
  display: block;
  color: aliceblue;
  position: relative;
  margin-left: 30px;
  font-size: 40px;
  width: 50px;
  height: 50px;
  margin-top: 20px;
  z-index: 2;
}

.tubiao i {
  position: absolute;
  left: 16px;
  top: -5px;
}

.tubiao::before {
  content: '';
  position: absolute;
  width: 70px;
  height: 50px;
  background-color: rgba(255, 122, 166, 0.5);
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  z-index: -1;
}

.card1 p,
.card p {
  color: rgb(99, 98, 98);
  font-size: 14px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin: 5px 0 5px 5px;
}

.playlist_recommend {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 570px;
  padding: 0 20px 0 20px;
  overflow-x: scroll;
  overflow-y: hidden;
}

/* 自定义滚动条 */
.playlist_recommend::-webkit-scrollbar,
.everybody_is_listening ul::-webkit-scrollbar {
  height: 4px;
}

.playlist_recommend::-webkit-scrollbar-thumb,
.everybody_is_listening ul::-webkit-scrollbar-thumb {
  background-color: rgba(255, 122, 166, 0.5);
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

.playlist_recommend::-webkit-scrollbar-track,
.everybody_is_listening ul::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}

.hideicon2 {
  display: none;
  position: absolute;
  height: 30px;
  width: 30px;
  top: 3px;
  left: 22px;
  z-index: 2;
}

.icon4 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 22px;
  left: 18px;
  z-index: 2;
  /* overflow: hidden; */
}

.playing2 {
  width: 4px;
  height: 24px;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  color: #36ff90;
  box-sizing: border-box;
  animation: playing2 0.6s linear infinite;
  -webkit-animation: playing2 0.6s linear infinite;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

@keyframes playing2 {
  0% {
    box-shadow: 10px -5px, 20px 5px, 30px 0px;
  }

  25% {
    box-shadow: 10px 0px, 20px 0px, 30px 5px;
  }

  50% {
    box-shadow: 10px 5px, 20px -5px, 30px 0px;
  }

  75% {
    box-shadow: 10px 0px, 20px 0px, 30px -5px;
  }

  100% {
    box-shadow: 10px -10px, 20px 5px, 30px 0px;
  }
}


.hideicon3 {
  display: none;
  position: absolute;
  height: 40px;
  width: 40px;
  top: 15px;
  right: 20px;
  z-index: 2;
}

.everybody_is_listening .hideicon4:nth-child(1) {
  display: none;
  position: absolute;
  height: 40px;
  width: 40px;
  top: 80px;
  left: -10px;
  z-index: 2;
}

.everybody_is_listening .hideicon4:nth-child(2) {
  display: none;
  position: absolute;
  height: 40px;
  width: 40px;
  top: 80px;
  right: -10px;
  z-index: 2;
}

.hideicon4 {
  font-size: 40px;
}

.hideicon3 i {
  font-size: 25px;
  color: rgb(0, 0, 0);
}

.hideicon2 i {
  font-size: 40px;
  color: rgb(255, 255, 255);
}

.hideicon2 i:hover {
  color: #576ef0;
}

.everybody_is_listening ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  position: relative;
  width: 100%;
  height: 230px;
  padding: 0 20px 0 20px;
  margin-top: 5px;
  column-gap: 15px;
  row-gap: 5px;
  /* overflow-x: scroll; */
  overflow: hidden;
}

.everybody_is_listening ul:hover .hideicon4 {
  display: block;
}

.everybody_is_listening ul li {
  display: flex;
  justify-content: left;
  align-items: center;
  position: relative;
  padding: 0 10px;
  /* border: 1px solid #9fabf0; */
  min-width: 300px;
  height: 70px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.everybody_is_listening ul li:hover {
  background-color: gainsboro;
}

.everybody_is_listening ul li:hover .hideicon2,
.everybody_is_listening ul li:hover .hideicon3 {
  display: block;
}

.songImg {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.Playlist_recycle {
  position: relative;
}

.Playlist_recycle ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(1, 1fr);
  place-items: center;
  /* position: relative; */
  width: 100%;
  height: 270px;
  padding: 0 20px 0 20px;
  gap: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: all .5 ease-in-out;
  -webkit-transition: all .5 ease-in-out;
  -moz-transition: all .5 ease-in-out;
  -ms-transition: all .5 ease-in-out;
  -o-transition: all .5 ease-in-out;
}

.Playlist_recycle .hideicon4:nth-child(1) {
  display: none;
  position: absolute;
  height: 40px;
  width: 40px;
  top: 95px;
  left: -10px;
  z-index: 2;
}

.Playlist_recycle .hideicon4:nth-child(2) {
  display: none;
  position: absolute;
  height: 40px;
  width: 40px;
  top: 95px;
  right: -10px;
  z-index: 2;
}

.Playlist_recycle:hover .hideicon4 {
  display: block;
}

.card:hover {
  top: -5px;
  box-shadow: rgb(0 0 0 / 10%);
}

/* 顶部栏 */
.topBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  width: calc(100vw - 200px);
  height: 60px;
  background-color: rgb(250, 250, 250);
  z-index: 4;
}

.rh {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10px;
  padding: 0 10px;
}

.fowardAndbackon {
  display: block;
  font-size: 25px;
  min-width: 57.4px;
}


.restart {
  margin-left: 10px;
  margin-top: 2px;
  font-size: 18px;
}

.seh {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
}

.listhen {
  width: 20px;
  right: 0;
  font-size: 18px;
}

.listhen::before {
  content: '';
  background-color: rgb(74, 253, 149);
  position: absolute;
  right: -4px;
  top: -1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  z-index: -1;
}

.search {
  position: relative;
  margin: 0 10px 0 20px;
}

.search input {
  height: 30px;
  border-radius: 15px;
  padding: 0 10px 0 30px;
  background-color: rgb(230, 230, 230);
}

.search i {
  position: absolute;
  margin: 2px 0 0 10px;
}

.lef {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  padding: 0 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.name {
  color: rgb(95, 95, 95);
  margin-left: 5px;
  font-size: 15px;
}

.ma {
  margin-top: 65px;
}

.page {
  display: block;
  z-index: 1;
}

.favor {
  width: 100%;
  /* padding-right: 100px; */
}

.index {
  display: flex;
  width: calc(100vw- 200px);
  height: calc(100vh - 135px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: rgb(199, 252, 252);
  box-shadow: 0 -1px 10px 2px rgb(200, 240, 246);
}

.index::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  background: linear-gradient(to right, #9fabf0, #ff7aa6);
  filter: blur(100px);
  z-index: 1;
  pointer-events: none;
}

.index p:nth-child(1) {
  font-size: 30px;
  font-weight: 300;
  z-index: 2;
}

.index p:nth-child(2) {
  font-size: 70px;
  font-weight: 500;
  z-index: 2;
}

/* 搜索页面歌曲列表 */

.search_songlist {
  width: calc(100vw- 200px);
  margin: 0 30px;
}

.serch_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 30px;
  color: rgb(87, 87, 87);
  font-size: small;
}

.serch_nav_right {
  display: flex;
  justify-content: space-between;
  width: 40%;
}

.serch_nav_right div:nth-child(2) {
  margin-right: 97px;
}

.lisMain {
  height: calc(100vh - 340px);
  overflow-y: scroll;
  overflow-x: hidden;
}

.lisMain2 {
  height: calc(100vh - 270px);
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.search_songlist ul li {
  -o-border-radius: 7px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  position: relative;
  content-visibility: auto;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}

.playing {
  background-color: rgb(224, 224, 224);
}

.hideicon {
  display: none;
  position: absolute;
  height: 30px;
  width: 30px;
  top: 1px;
  left: 13px;
  z-index: 2;
}

.hideicon i {
  font-size: 30px;
  color: rgb(255, 255, 255);
}

.hideicon i:hover {
  color: #576ef0;
}

.search_songlist ul li:hover {
  background-color: rgb(224, 224, 224);
}

.search_songlist ul li:hover .hideicon {
  display: block;
}

.search_songlist_left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 60%;
  padding: 0 20px 0 7px;
}

.search_songlist_right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 40%;
  padding: 0 90px 0 0;
}

.search_songlist_left .dowhat i:nth-child(1) {
  position: absolute;
  bottom: 9px;
  right: 180px;
  font-size: 20px;
  color: #ff7aa6;
}

.menu {
  position: absolute;
  bottom: 1px;
  right: -35px;
  font-size: 20px;
}

.menu2 {
  position: absolute;
  display: none;
  right: 5px;
  bottom: 10px;
  font-size: 15px;
}

.personallistli {
  position: relative;
}

.personallistli:hover .menu2 {
  display: block;
}

.songlistlifont {
  font-size: small !important;
}

.song_information {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.song_information img {
  width: 40px;
  height: 40px;
  overflow: hidden;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

.song_name {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-left: 10px;
}

.song_name #singer {
  font-size: 12px;
  color: rgb(95, 95, 95);
}

.search_songlist_right #songalbum,
.search_songlist_right #songduration {
  font-size: 13px;
  color: rgb(95, 95, 95);
}

/* 底部音乐播放器 */
.buttom {
  display: flex;
  justify-content: space-between;
  height: 70px;
  bottom: 0px;
  width: 100vw;
  overflow: hidden;
  background-color: rgb(250, 249, 249);
  box-shadow: 0 -1px 4px 1px rgb(216, 216, 216);
}

.start {
  display: flex;
  justify-content: start;
  align-items: center;
  min-width: 300px;
  margin-left: 5px;
  width: 25%;
  height: 70px;
  padding: 2px;
}

.music-small-img {
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  margin-left: 0px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

.music-small-img img {
  position: absolute;
  margin-bottom: 30px;
}

.music-small-img:hover {
  box-shadow: 0 0 3px 2px #666;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
}


.music-information {
  min-width: 100px
}

.music-information ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 100%;
}

.music-information ul li {
  height: 20px;
  margin-left: 20px;
}

.music-information ul li:nth-child(1) {
  font-size: medium;
  font-family: 'Times New Roman', Times, serif;
  color: rgb(26, 26, 26);
}

.music-information ul li:nth-child(2) {
  font-size: 12px;
  font-family: 'Times New Roman', Times, serif;
  color: gray;
}

.selections {
  display: block;
  width: 120px;
  min-width: 120px;
  margin-left: 20px;
}

.selections p i {
  font-size: 20px;
  padding: 5px;
  color: rgb(71, 71, 71);
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  min-width: 400px;

}

.mediaControl {
  width: 100%;
  height: 45px;
  margin-bottom: -7px;
}

.mediaControl ul {
  display: flex;
  justify-content: center;
}

.mediaControl ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 60px;
  height: 45px;
  z-index: 1;
}

.mediaControl ul li:nth-child(1),
.mediaControl ul li:nth-child(3) {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  width: 60px;
  height: 45px;
}


.mediaControl ul li:nth-child(2) {
  font-size: 20px;
  color: black;
  padding: 20px;
}

.mediaControl ul li:nth-child(2)::before {
  content: '';
  background-color: rgb(73, 253, 148);
  position: absolute;
  top: 8px;
  left: 10px;
  width: 40px;
  height: 30px;
  border-radius: 40%;
  z-index: -1;
}

.mediaprogress {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .progressBar {
  width: 70%;
  height: 3px;
  cursor: pointer;
  position: relative;
  background-color: rgb(219, 219, 219);
  border: 1px solid rgb(219, 219, 219);
  -o-border-radius: 5vw;
  -webkit-border-radius: 5vw;
  -moz-border-radius: 5vw;
  -ms-border-radius: 5vw;
  border-radius: 5vw;
}

.progress {
  height: 3px;
  cursor: pointer;
  -o-border-radius: 5vw;
  background-color: rgb(37, 37, 37);
  -webkit-border-radius: 5vw;
  -moz-border-radius: 5vw;
  -ms-border-radius: 5vw;
  border-radius: 5vw;
  position: absolute;
  top: -1px;
  left: -1px;
} */

#currenttime {
  font-size: 12px;
  margin-right: 10px;
  color: rgb(99, 98, 98);
}

#totaltime {
  font-size: 12px;
  margin-left: 10px;
  color: rgb(99, 98, 98);
}

.progress-bar {

  width: 70%;
  appearance: none;
  margin-top: 0px;
  height: 3px;
  background: #ddd;
  border-radius: 5px;
}

.progress-bar::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.time-display {
  font-size: 14px;
  color: #666;
}


.end {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-right: 20px;
  width: 25%;
}

.volume-control {
  /* display: block; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 50px;
  min-width: 170px;
  width: 170px;
}

.volume-control:hover .ri-volume-mute-line {
  color: rgb(85, 85, 85);
}

.volume-control:hover .ri-volume-down-line {
  color: rgb(85, 85, 85);
}

.volume-control:hover .ri-volume-up-line {
  color: rgb(85, 85, 85);
}

.ri-volume-mute-line,
.ri-volume-down-line,
.ri-volume-up-line {
  font-size: 25px;
  color: gray;
}

.volume-bar {
  height: 5px;
}




.titl {
  font-size: 35px;
  font-weight: 1000;
  margin-left: 50px;
}

.titl2 {
  font-size: 20px;
  font-weight: 500;
  margin-left: 30px;
  margin-top: 15px;
}

/* 本地与下载页面 */
.local_top {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-width: 870px;
  width: 100%;
  height: 100px;
  border: #9fabf0 1px solid;
}

.songs_nav {
  display: flex;
  justify-content: space-between;

}

.songs_nav_li ul {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  padding: 0 52px;
}

.songs_nav_li ul li {
  margin-right: 30px;
}

.songs_nav_li ul li:hover {
  color: #8fa0ff;
}

.click2 {
  position: relative;
  color: #6f85fd;
}


.click2::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 3px;
  background-color: #6f85fd;
  bottom: -3px;
  left: 11px;
  -o-border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
}

.local_main {
  display: block;
  width: 100%;
  height: calc(100vh - 135px - 120px);
  overflow: hidden;
}

.page2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  gap: 20px;
  margin: calc((100vh - 135px - 120px - 150px) / 2) auto;
}

.local_main div img {
  width: 120px;
  height: 100px;
}

.local_main div p {
  width: 96px;
  height: 100px;
}


/* 最近播放页面 */
.recent_top {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-width: 870px;
  width: 100%;
  height: 100px;
  /* border: #9fabf0 1px solid; */
}

.click3 {
  position: relative;
  color: #6f85fd;
}

.click3::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 3px;
  background-color: #6f85fd;
  bottom: -3px;
  left: 5px;
  -o-border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
}

.recent_nav {
  display: flex;
  justify-content: space-between;
}

.recent_nav_li ul {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  padding: 0 52px;
}

.recent_nav_li ul li {
  margin-right: 30px;
}

.recent_nav_li ul li:hover {
  color: #8fa0ff;
}

.recent_main {
  display: block;
  width: 100%;
  overflow: scroll;
}

.playlistcontainer {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  min-width: 870px;
  width: 100%;
  height: 170px;
  z-index: 1;
  /* border: #9fabf0 1px solid; */
}

.playlistinformation {
  display: flex;
  justify-content: start;
  align-items: center;
  position: relative;
  height: 140px;
  width: 100%;
}

.bianji {
  position: absolute;
  right: 50px;
  top: 30px;
  width: 70px;
  height: 25px;
  color: black;
  background-color: #e6e6e6;
  text-align: center;
  font-size: 16px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  transition: all 0.15s ease-out;
}

.bianji:hover {
  width: 55px;
}

.playlistImg {
  display: block;
  width: 120px;
  height: 120px;
  min-width: 120px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  margin: 2px 5px;
}

.list-maininformation {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 120px;
  width: 1000px;
  margin-top: -5px;
}

#playlistname {
  font-size: 25px;
  font-weight: 500;
  margin-left: 10px;
}

#playlistusernickname {
  font-size: 14px;
  margin-left: 5px;
  color: rgb(99, 98, 98);
}

.playlistavatar {
  display: flex;
  align-items: center;
  margin-top: -2px;
  margin-left: 15px;
}

.playlistavatar img {
  width: 20px;
  height: 20px;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}

.introduce {
  font-size: 14px;
  color: rgb(99, 98, 98);
  margin-left: 15px;
  width: 100%;
  height: 25px;
  overflow: hidden;
}

.playlistControl {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 400px;
  margin-bottom: -5px;
  margin-left: 10px;
}

.playlistControl button {
  all: unset;
  border: 0px;
  width: 90px;
  height: 36px;
  text-align: center;
  margin-top: 15px;
  background-color: #e9e9e9;
  -o-border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
  font-size: 15px;
  color: black;
  transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
}

.playlistControl button:hover {
  background-color: #c0c0c0;
  scale: .95;
}

.playlistControl button i {
  margin-right: 3px;
  margin-left: -3px;
}

.playlistnav ul {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding-left: 8px;
}

.playlistnav ul li {
  width: 50px;
  margin: 0 40px 0 0;
  font-size: medium;
  color: black;
}



.loadingPage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 140px);
}

.loadcomponents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
}

/* HTML: <div class="loader"></div> */
.loader1 {
  --w: 10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  line-height: 2em;
  letter-spacing: var(--w);
  width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  color: #0000;
  text-shadow:
    calc(0*var(--w)) 0 #000, calc(-1*var(--w)) 0 #000, calc(-2*var(--w)) 0 #000, calc(-3*var(--w)) 0 #000, calc(-4*var(--w)) 0 #000,
    calc(-5*var(--w)) 0 #000, calc(-6*var(--w)) 0 #000, calc(-7*var(--w)) 0 #000, calc(-8*var(--w)) 0 #000, calc(-9*var(--w)) 0 #000;
  animation: l31 1s infinite cubic-bezier(0.5, -150, 0.5, 150);
}

.loader1:before {
  content: "Loading...";
}

@keyframes l31 {

  15%,
  100% {
    text-shadow:
      calc(0*var(--w) + 0.1px) 0 #000000, calc(-1*var(--w)) 0.01em #000, calc(-2*var(--w) - 0.2px) 0 #000, calc(-3*var(--w) + 0.1px) 0.01em #000, calc(-4*var(--w)) -0.01em #000,
      calc(-5*var(--w) - 0.1px) 0 #000, calc(-6*var(--w) - 0.2px) 0.015em #000, calc(-7*var(--w) - 0.1px) 0.02em #000, calc(-8*var(--w)) -0.01em #000, calc(-9*var(--w) + 0.2px) -0.01em #000;
  }
}



.loader2 {
  width: 106px;
  height: 56px;
  display: block;
  margin: 30px auto;
  background-image: linear-gradient(#000 50px, transparent 0), linear-gradient(#000 50px, transparent 0), linear-gradient(#000 50px, transparent 0), linear-gradient(#000 50px, transparent 0), radial-gradient(circle 14px, #000 100%, transparent 0);
  background-size: 48px 15px, 15px 35px, 15px 35px, 25px 15px, 28px 28px;
  background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
  background-repeat: no-repeat;
  position: relative;
  transform: rotate(-45deg);
  box-sizing: border-box;
}

.loader2::after,
.loader2::before {
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  border: 6px solid #000;
  border-radius: 50%;
  left: -45px;
  top: -10px;
  background-repeat: no-repeat;
  background-image: linear-gradient(#000 64px, transparent 0), linear-gradient(#000 66px, transparent 0), radial-gradient(circle 4px, #000 100%, transparent 0);
  background-size: 40px 1px, 1px 40px, 8px 8px;
  background-position: center center;
  box-sizing: border-box;
  animation: rotation 0.3s linear infinite;
}

.loader2::before {
  left: 25px;
  top: 60px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}